<template>
    <view>
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in yearMonthDayArray" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in mins" :key="index">{{item}}分</view>
            </picker-view-column>
        </picker-view>
    </view>
</template>

<script>
    export default {
		
        data: function () {
			// 获取当前日期
			const today = new Date();
			let timer = ''
			// 获取一个月内的日期数组
			const yearMonthDayArray = [];
			const dateItem = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
 
			for (let i = 1; i <= 31; i++) {
				const d = new Date(today);
				d.setDate(today.getDate() + i);
				const yearMonthDayStr = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
				yearMonthDayArray.push(yearMonthDayStr);
			}
					
			console.log(yearMonthDayArray,'yearMonthDayArray')
		
            const hours = []
            const hour = today.getHours()
            const mins = []
            const min = today.getMinutes()
            // for (let i = 2023; i <= date.getFullYear(); i++) {
            //     years.push(i)
            // }
            for (let i = 1; i <= 24; i++) {
                hours.push(i)
            }
			console.log(hours,'hours')
            for (let i = 1; i <= 60; i++) {
                mins.push(i)
            }
			
			
			
            return {
				timer,
				yearMonthDayArray,
				dateItem,
                hours,
				hour,
				mins,
				min,
                // day,
                value: [0, hour, min],
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
				console.log(e.detail,'val')
                this.date = this.yearMonthDayArray[val[0]]
                this.hour = this.hours[val[1]]
                this.min = this.mins[val[2]]
				this.timer = this.date+' '+this.hour+':'+this.min
				console.log(this.timer ,'timer')
				this.$emit('timer',this.timer )
            }
        },
		onLoad() {
			this.timer = this.dateItem +' '+this.hour+':'+this.min
			this.$emit('timer',this.timer )
			// 需要在onReady中设置规则
			// this.$refs.form.setRules(this.rules)
		
		},
    }
</script>
<style>
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>

